<template>
  <div class="home">
    <!-- 预约成功提示语 v-if="resumesStatus.resumesStatus == 1"-->
    <!-- <div class="topTips" v-if="resumesStatus.resumesStatus == 1">
      <div class="top_shows">
        <div class="shows_contents">
          <div style="display: flex;justify-content: left;align-items: center;">
            <img src="../assets/ui/img/applicationTopBG.png" alt="">
            <div class="showTxt">
              <h3>
                预约面试成功！{{ resumesStatus.passedStatus }}
              </h3>
              <div>
                预约成功，请等待面试
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 投递的状态,确认-未通过-放弃-进行中 "-->
    <div class="states" v-if="resumesStatus.resumesStatus == 1">
      <div class="top_shows">
        <div class="shows_contents">
          <span>
            投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
          </span>
          <img v-if="resumesStatus.resumesStatusName == '已确认签约'" src="../assets/ui/img/applicationSure.png" alt="">
          <img v-if="resumesStatus.resumesStatusName == '未通过'" src="../assets/ui/img/applicationFaild.png" alt="">
          <img v-if="resumesStatus.resumesStatusName == '自愿放弃'" src="../assets/ui/img/applicationGiveUp.png" alt="">
        </div>
        <div v-if="resumesStatus.educationType == 0 && resumesStatus.resumesStatusName == '已确认签约'" @click="checkxieyi()"
          class="checkSanfang">
          查看应约协议
        </div>
      </div>
    </div>
    <div v-else>
      <!-- 投递的进度状态提示语 根据不同状态判定颜色 v-if="clickStatus.resumesId == 0"-->
      <div :class="['content', 4 > 3 ? '' : 'contentBgRed']" v-if="steps == 0">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              暂无应聘记录，请先投递简历
            </span>
            <van-button @click="router.push('/join')" type="default" round icon="arrow" icon-position="right" plain
              size="small">去投递</van-button>
          </div>
        </div>
      </div>
      <!-- 投递日期 "-->
      <div class="states" v-if="stepsStr == '1-0'">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
            </span>
            <img v-if="resumesStatus.resumesStatusName == '进行中'" src="../assets/ui/img/applicationLoading.png" alt="">
          </div>
        </div>
      </div>
      <!-- 简历待筛选！-->
      <!-- 投递的状态,确认-未通过-放弃-进行中 "-->
      <div class="states" v-if="stepsStr == '2-0'">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
            </span>
            <img v-if="resumesStatus.resumesStatusName == '进行中'" src="../assets/ui/img/applicationLoading.png" alt="">
            <img v-if="resumesStatus.resumesStatusName == '已确认签约'" src="../assets/ui/img/applicationSure.png" alt="">
            <img v-if="resumesStatus.resumesStatusName == '未通过'" src="../assets/ui/img/applicationFaild.png" alt="">
            <img v-if="resumesStatus.resumesStatusName == '自愿淘汰'" src="../assets/ui/img/applicationGiveUp.png" alt="">
          </div>
        </div>
      </div>
      <!-- <div class="topTips" v-if="stepsStr == '2-0'">
        <div class="top_shows">
          <div class="shows_contents">
            <div style="display: flex;justify-content: left;align-items: center;">
              <img src="../assets/ui/img/applicationTopBG.png" alt="">
              <div class="showTxt">
                <h3>
                  简历待筛选！
                </h3>
                <div>
                  请在对应时间内参加面试，如有变动请提前1天和对应HR联系。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 待约面！-->
      <div class="states" v-if="stepsStr == '3-1'">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
            </span>
            <img v-if="resumesStatus.resumesStatusName == '进行中'" src="../assets/ui/img/applicationLoading.png" alt="">
            <img v-if="resumesStatus.resumesStatusName == '已确认签约'" src="../assets/ui/img/applicationSure.png" alt="">
            <img v-if="resumesStatus.resumesStatusName == '未通过'" src="../assets/ui/img/applicationFaild.png" alt="">
            <img v-if="resumesStatus.resumesStatusName == '自愿淘汰'" src="../assets/ui/img/applicationGiveUp.png" alt="">
          </div>
        </div>
      </div>
      <!-- 预约面试成功！-->
      <div class="topTips" v-if="stepsStr == '3-2'">
        <div class="top_shows">
          <div class="shows_contents">
            <div style="display: flex;justify-content: left;align-items: center;">
              <img src="../assets/ui/img/applicationTopBG.png" alt="">
              <div class="showTxt">
                <h3>
                  预约面试成功！
                </h3>
                <div style="height: 2px;"></div>
                <div class="tipMsg">
                  请在对应时间内参加面试，如有变动请提前1天和对应HR联系。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 预约面试时间 -->
      <div :class="['content', 4 > 3 ? '' : 'contentBgRed']" v-if="stepsStr == '3-2'" style="line-height: 30px;">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              面试时间：{{ resumesStatus.interviewTime == null ? '线下面试' : resumesStatus.interviewTime }}
            </span>
            <!-- <van-button @click="router.push('/join')" type="default" round icon="arrow" icon-position="right" plain
            size="small">去投递</van-button> -->
          </div>
        </div>
      </div>
      <!-- 恭喜通过面试！-->
      <div class="topTips" v-if="stepsStr == '4-1' && resumesStatus.passedStatus == 1">
        <div class="top_shows">
          <div class="shows_contents">
            <div style="display: flex;justify-content: left;align-items: center;">
              <img src="../assets/ui/img/applicationTopBG.png" alt="">
              <div class="showTxt">
                <h3>
                  恭喜通过面试！
                </h3>
                <div style="height: 2px;"></div>
                <div class="tipMsg">
                  请在7天内选定培训期数，逾期未填写视为自愿放弃
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="['content', 2 > 3 ? '' : 'contentBgRed']"
        v-if="stepsStr == '4-1' && resumesStatus.passedStatus == 1">
        <div class="top_shows">
          <div class="shows_contents coutDown">
            <span>
              <!-- {{ resumesStatus.appointmentTrainingTime }} -->
              剩余时间：
              <van-count-down :time="millisecondsDifference" format="DD 天 HH 时 mm 分 ss 秒" />
            </span>
            <van-button @click="router.push('/SureJoin')" type="default" round icon="arrow" icon-position="right" plain
              size="small">去填写</van-button>
          </div>
        </div>
      </div>
      <!-- 预约培训成功到考核-->
      <div class="topTips" v-if="stepsStr == '4-1' && resumesStatus.passedStatus == 0">
        <div class="top_shows">
          <div class="shows_contents">
            <div style="display: flex;justify-content: left;align-items: center;">
              <img src="../assets/ui/img/applicationTopBG.png" alt="">
              <div class="showTxt">
                <h3>
                  预约培训成功
                </h3>
                <div style="height: 2px;"></div>
                <div class="tipMsg">
                  请在对应时间内参加培训，如有变动请提前和对应HR联系。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="['content', 4 > 3 ? '' : 'contentBgRed']"
        v-if="stepsStr == '4-1' && resumesStatus.passedStatus == 0">
        <div class="top_shows">
          <!-- 到培时间填写了 -->
          <div class="shows_contents">
            <span>
              培训时间：{{ resumesStatus.trainingTime }}
            </span>
          </div>
          <!-- 到培时间没有填写了 -->
          <!-- <div class="shows_contents coutDown" v-if="resumesStatus.passedStatus == 1">
            <span>
      
              剩余时间：
              <van-count-down :time="millisecondsDifference" format="DD 天 HH 时 mm 分 ss 秒" />
            </span>
            <van-button @click="router.push('/join')" type="default" round icon="arrow" icon-position="right" plain
              size="small">去填写</van-button>
          </div> -->
        </div>
      </div>
      <!-- 投递日期 "-->
      <div class="states" v-if="stepsStr == '4-2'">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
            </span>
            <img v-if="resumesStatus.resumesStatusName == '进行中'" src="../assets/ui/img/applicationLoading.png" alt="">
          </div>
        </div>
      </div>
      <!-- 投递日期 "-->
      <div class="states" v-if="stepsStr == '4-3'">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
            </span>
            <img v-if="resumesStatus.resumesStatusName == '进行中'" src="../assets/ui/img/applicationLoading.png" alt="">
          </div>
        </div>
      </div>
      <!-- 投递日期 "-->
      <div class="states" v-if="stepsStr == '4-4'">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
            </span>
            <img v-if="resumesStatus.resumesStatusName == '进行中'" src="../assets/ui/img/applicationLoading.png" alt="">
          </div>
        </div>
      </div>
      <!-- 发送offer日期 "-->
      <div class="states" v-if="stepsStr == '5-0'">
        <div class="top_shows">
          <div class="shows_contents">
            <span>
              投递日期：{{ resumesStatus.resumesTime ? resumesStatus.resumesTime : '' }}
            </span>
            <img v-if="resumesStatus.resumesStatusName == '进行中'" src="../assets/ui/img/applicationLoading.png" alt="">
          </div>
        </div>
      </div>
      <!-- 恭喜通过考核-->
      <div class="topTips" v-if="stepsStr == '6-0'">
        <div class="top_shows">
          <div class="shows_contents">
            <div style="display: flex;justify-content: left;align-items: center;">
              <img src="../assets/ui/img/applicationTopBG.png" alt="">
              <div class="showTxt">
                <h3>
                  恭喜通过考核
                </h3>
                <div style="height: 2px;"></div>
                <div class="tipMsg">
                  请在三天内确认是否接受Offer，逾期未处理视为自愿放弃
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="['content', 2 > 3 ? '' : 'contentBgRed']" v-if="stepsStr == '6-0'">
        <div class="top_shows">
          <div class="shows_contents coutDown">
            <span>
              <!-- {{ resumesStatus.offerTime }} -->
              剩余时间：
              <van-count-down :time="millisecondsDifference" format="DD 天 HH 时 mm 分 ss 秒" />
            </span>
            <van-button @click="SureOffer()" type="default" round icon="arrow" icon-position="right" plain
              size="small">去确认</van-button>
          </div>
        </div>
      </div>
    </div>
    <Step :stepData="stepData" :showDialog='showDialog' @closePop="showDialog = false"></Step>
  </div>
</template>

<script setup lang="ts">
import Step from '../components/Step.vue';
import { useRouter } from 'vue-router';
import { localUserinfo } from '../assets/js/common';
const userInfo = localUserinfo();
import apis from '../api/index';
import { nextTick, onMounted, ref } from 'vue';
import { showDialog } from 'vant';
const clickStatus = JSON.parse(localStorage.getItem('clickStatus'));
const { userResumesList, userResumesProcess } = apis;
const resumesStatus = ref({});
onMounted(() => {
  getResume();
})
// 传递给 Step 组件的数据
const stepData = ref();
//简历的状态
const steps = ref<number>();
//简历的小进度状态
const stepsList = ref<number>();
//简历字符串
const stepsStr = ref<string>();
const stepComponentRef = ref<any>();

const showDialog = ref<boolean>(false);
const checkxieyi = () => {
  router.push('/train/sanfang')
}
//确认offer
const SureOffer = async () => {
  showDialog.value = !showDialog.value;
}
function calculateDifference(dateStr1: string, dateStr2: string): number {
  const date1 = new Date(dateStr1);
  const date2 = new Date(dateStr2);

  // 确保日期格式正确解析
  if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
    throw new Error('Invalid date format');
  }
  // 计算两个日期之间的差值（以毫秒为单位）
  const difference = Math.abs(date1.getTime() - date2.getTime());

  return difference;
}

const currentDay = ref(clickStatus.currentDay);
const getTime = ref('2024-08-15');

const millisecondsDifference = ref();

const getResume = async () => {
  // const list = await userResumesList({
  //   userId: userInfo.userId
  // });
  if (clickStatus.resumesId != null) {
    const process = await userResumesProcess({
      resumesId: clickStatus.resumesId
    });
    resumesStatus.value = process.data;
    stepsStr.value = process.data.process;

    // const strings = '6-0';
    // stepsStr.value = strings

    steps.value = Number(process.data.process.split('-')[0] - 1);
    stepsList.value = Number(process.data.process.split('-')[1]);
    //steps.value = 0;
    if (process.data.issuedStatus == 0) {
      showDialog.value = false;
    } else {
      showDialog.value = true;
    }
    //根据状态来判定时间
    if (steps.value == 5) {
      getTime.value = resumesStatus.value.offerTime;
      //根据日期来判定，来计算时分秒
      millisecondsDifference.value = calculateDifference(getTime.value, currentDay.value);
    } else if (steps.value == 3) {
      console.log(resumesStatus.value.appointmentTrainingTime)
      getTime.value = resumesStatus.value.appointmentTrainingTime;
      millisecondsDifference.value = calculateDifference(getTime.value, currentDay.value);
    }
    stepData.value = process.data;
  } else {
    steps.value = 0;
    resumesStatus.value.resumesStatus = 0;
  }
}


const router = useRouter();

</script>

<style lang="less" scoped>
.tipMsg {
  color: #666;
  line-height: 24px;
}

:deep(.van-button--small) {
  background: none;
  color: #ffffff;
}

:deep(#app) {
  background: #F5F7FB;
}

.home {
  background: #f5f5f5;
  padding: 0 20px;
  padding-top: 70px;
  height: 100vh;

  .content {
    background: #209ee4;
    height: 50px;
    border-radius: 10px;
    color: #ffffff;
    position: relative;
    z-index: 0;
    line-height: 30px;

    //top: 20px;
    .top_shows {
      .shows_contents {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-top: 10px;


      }

      span {
        font-size: 16px;
      }

      .coutDown {
        span {
          display: flex;
          align-items: baseline;

          :deep(.van-count-down) {
            color: #FF4242 !important;
          }

        }

      }
    }
  }

  .contentBgRed.content {
    background: #FEE0D6;
    color: #FF4242;

    :deep(.van-button) {
      color: #FF4242;
      border-color: #FF4242;
    }
  }

  .states {
    height: 70px;
    border-radius: 10px;
    color: #435679;
    background: linear-gradient(92deg, #C7D5EA 0%, #E5EBF4 100%);
    line-height: 60px;
    position: relative;

    img {
      width: 20%;
      position: relative;
      left: 8px;
      top: 0px;
    }

    .top_shows {
      .checkSanfang {
        position: absolute;
        right: 20px;
        bottom: -15px;
      }

      .shows_contents {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 4px;


      }

      span {
        font-size: 16px;
        padding-left: 25px;
      }

      .coutDown {
        span {
          display: flex;
          align-items: baseline;

          :deep(.van-count-down) {
            color: #FF4242 !important;
          }
        }

      }
    }
  }

  .topTips {
    //height: 80px;
    color: #333333;
    //margin: -10px 0 20px 0;

    img {
      width: 30%;
    }

    .top_shows {
      .shows_contents {
        display: flex;
        align-items: center;
        justify-content: left;
      }

      .showTxt {
        margin-left: 10px;
      }
    }
  }
}
</style>
